<template>
  <div class="page-login">
    <el-form ref="myForm" class="page-login__form" label-width="80px" :model="model" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="model.username" />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="model.password" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
// import request from '@/utils/request'
import { loginApi } from '@/api/login'

// 表单数据
const model = reactive({
  username: 'admin',
  password: '123456'
})

// 表单规则
const rules = {
  username: [{ required: true, message: '用户名必须输入' }],
  password: [{ required: true }]
}

const myForm = ref()
/**
 * 处理登录
 */
async function handleLogin() {
  await myForm.value.validate()

  // request({
  //   url: '/api/auth/login',
  //   method: 'POST',
  //   data: {
  //     // 请求体参数
  //     username: model.username,
  //     password: model.password
  //   }
  // })
  //   .then((resp: any) => {
  //     console.log('resp', resp)
  //     // 由于统一在封装中判断了业务状态码，所以这里不需要在额外判断，then的回调函数一定是业务状态码为200才会执行
  //     alert('登录成功')
  //   })

  // await request({
  //   url: '/api/auth/login',
  //   method: 'POST',
  //   data: {
  //     // 请求体参数
  //     username: model.username,
  //     password: model.password
  //   }
  // })
  // // 成功的代码
  // alert('登录成功')

  // await loginApi(model.username, model.password)
  // ElMessage.success('登录成功')
  // 1. 将 token 储存起来的操作 - 仓库中
  // 2. 跳转到 主控台 页面的操作
}
</script>

<style lang="scss" scoped>
.page-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #ccc;

  &__form {
    padding: 30px;
    width: 300px;
    border: 1px solid #000;
    background-color: #fff;
  }
}
</style>
